<!-- ERC-备件看板页面 -->
<template>
  <div>
    <div class="equip-wrap-common" style="flex-wrap: wrap; height: 150px; margin-bottom: 16px; border-radius: 4px">
      <Overview />
    </div>
    <div class="equip-wrap-common" style="height: 64px; margin-bottom: 16px; border-radius: 4px">
      <CustomSearch :form="form" @submit="getChartData" @reset="handleReset" />
    </div>
    <div class="flex gap-[16px]">
      <px-card shadow="never" class="w-full" style="border-radius: 4px">
        <InTimeAnalysis ref="inTimeAnalysisRef" />
      </px-card>
      <px-card shadow="never" class="w-full" style="border-radius: 4px">
        <InventoryHealthAnalysisPanel
          :isTop="isTopForHealth"
          :data="dataOfHealthAnalysis"
          @back="handleGoBack"
          @getData="getStockHealthAnalysis"
          @pushCode="pushForHealth"
          @reset="resetForHealth"
          @enlarge="handleEnlarge"
        />
      </px-card>
    </div>
    <div class="flex gap-[16px] mt-[16px]">
      <px-card shadow="never" class="w-full" style="border-radius: 4px">
        <InAndOutCountTrendPanel ref="inAndOutCountTrendPanelRef" />
      </px-card>
      <px-card shadow="never" class="w-full" style="border-radius: 4px">
        <InAndOutTypeTrendPanel
          :isTop="isTopForType"
          :data="dataOfInAndOutTypeTrend"
          @back="handleGoBack"
          @getData="getInOutTypeCountData"
          @pushCode="pushForType"
          @reset="resetForType"
          @enlarge="handleEnlarge"
        />
      </px-card>
    </div>
    <Transition name="fade">
      <div v-if="isShowPanel" class="panel">
        <div class="header">
          <px-tooltip v-if="panelType === 'health' ? !isTopForHealth : !isTopForType" content="返回上一级" placement="top">
            <px-button class="button" text type="primary" @click="handleGoBack(panelType, false)">
              <px-icon><ArrowLeft /></px-icon>
            </px-button>
          </px-tooltip>
          <px-tooltip content="关闭全屏" placement="top">
            <px-button class="button" text type="primary" @click="handleZoomIn">
              <px-icon :size="24"><FullscreenExit /></px-icon>
            </px-button>
          </px-tooltip>
        </div>

        <div class="content">
          <InventoryHealthAnalysis
            v-if="panelType === 'health'"
            :data="dataOfHealthAnalysis"
            :showTop5Data="false"
            @pushCode="pushForHealth"
            @resetCode="resetForHealth"
            @getData="getStockHealthAnalysis"
          />
          <InAndOutTypeTrend
            v-else
            :data="dataOfInAndOutTypeTrend"
            :showTop5Data="false"
            @pushCode="pushForType"
            @resetCode="resetForType"
            @getData="getInOutTypeCountData"
          />
        </div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import { reactive, computed, ref, onMounted } from "vue";

import type { SearchParams, ResponseDataOfHealth, ResponseDataOfInAndOutTrend } from "@/api/erc/spareParts/signboard";
import { getDataOfStockHealthAnalysis, getDataOfInAndOutType } from "@/api/erc/spareParts/signboard";

import { useStack } from "./hooks/useStack";
import CustomSearch from "./components/CustomSearch.vue";
import type { PanelType, Params } from "./type";
import Overview from "./components/Overview.vue";
import InTimeAnalysis from "./components/InTimeAnalysis.vue";
import InAndOutTypeTrend from "./components/InAndOutTypeTrend.vue";
import InventoryHealthAnalysis from "./components/InventoryHealthAnalysis.vue";
import InAndOutCountTrendPanel from "./components/InAndOutCountTrendPanel.vue";
import InventoryHealthAnalysisPanel from "./components/InventoryHealthAnalysisPanel.vue";
import InAndOutTypeTrendPanel from "./components/InAndOutTypeTrendPanel.vue";

//获取过去365时间
const startTime = dayjs().subtract(365, "day").format("YYYY-MM-DD");
const endTime = dayjs().format("YYYY-MM-DD");

const dataOfHealthAnalysis = ref<ResponseDataOfHealth>([]);
const dataOfInAndOutTypeTrend = ref<ResponseDataOfInAndOutTrend>([]);
const isShowPanel = ref(false);
const panelType = ref<PanelType>("health");

const inTimeAnalysisRef = ref(null);
const inAndOutCountTrendPanelRef = ref(null);

const form = reactive<Params>({
  typeCode: "",
  sparePartName: "",
  specification: "",
  date: [startTime, endTime]
});

const params = computed<SearchParams>(() => ({
  typeCode: form.typeCode,
  sparePartName: form.sparePartName,
  specification: form.specification,
  startTime: form.date[0] + " 00:00:00",
  endTime: form.date[1] + " 23:59:59"
}));

const { push: pushForHealth, pop: popForHealth, reset: resetForHealth, getCurrentCode: getCurrentCodeForHealth, isTop: isTopForHealth } = useStack();
const { push: pushForType, pop: popForType, reset: resetForType, getCurrentCode: getCurrentCodeForType, isTop: isTopForType } = useStack();

pushForHealth("");
pushForType("");

onMounted(() => {
  getChartData();
});

const getChartData = () => {
  getStockHealthAnalysis();
  getInOutTypeCountData();
  inTimeAnalysisRef?.value && inTimeAnalysisRef?.value.getChartData(params.value);
  inAndOutCountTrendPanelRef?.value && inAndOutCountTrendPanelRef?.value.getChartData(params.value);
};
//库存健康分析
const getStockHealthAnalysis = async (isTop: boolean = true) => {
  try {
    const parentCode = getCurrentCodeForHealth();
    const searchParams = {
      ...params.value,
      parentCode,
      isTop
    };
    const res = await getDataOfStockHealthAnalysis(searchParams);
    dataOfHealthAnalysis.value = res;
  } catch (error) {
    console.log("service error", error);
  }
};
//出入库种类趋势
const getInOutTypeCountData = async (isTop: boolean = true) => {
  try {
    const parentCode = getCurrentCodeForType();
    const searchParams = {
      ...params.value,
      parentCode,
      isTop
    };
    const res = await getDataOfInAndOutType(searchParams);
    dataOfInAndOutTypeTrend.value = res;
  } catch (error) {
    console.log("service error", error);
  }
};

const handleReset = () => {
  form.typeCode = "";
  form.sparePartName = "";
  form.specification = "";
  form.date = [startTime, endTime];
  getChartData();
};

const handleEnlarge = (type: PanelType) => {
  isShowPanel.value = true;
  panelType.value = type;
  if (panelType.value === "health") {
    getStockHealthAnalysis(false);
  } else {
    getInOutTypeCountData(false);
  }
};

const handleZoomIn = () => {
  isShowPanel.value = false;
  if (panelType.value === "health") {
    getStockHealthAnalysis();
  } else {
    getInOutTypeCountData();
  }
};

const handleGoBack = (type: PanelType, isTop: boolean = true) => {
  if (type === "health") {
    popForHealth();
    getStockHealthAnalysis(isTop);
  } else {
    popForType();
    getInOutTypeCountData(isTop);
  }
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-flex-list.scss");
@import url("@/views/erc/scss/table-list.scss");

.panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  padding: 24px;

  .header {
    text-align: right;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
